/**
 * monitor/index
 * 监控页 - 总览 - 主要入口
 */

import Vue from 'vue';
import instant from '../../vue/instant';
import busHolder from '../../vue/bus';
import batch from '../screen/batch';
import fetcher from '../screen/fetcher';
import { KEY_SCREEN_REFRESH, KEY_SCREEN_UPDATED, KEY_SCREEN_DESTROYED } from '../screen/events';
import formatJson from '../../vue/formatJson';
let bus = busHolder.getBus;

/** @type {number} */
let handler;

Vue.component("body-screen-situation", {
  template : `
<div style="padding-top:15px" v-if="screen">
  <a-descriptions title="屏幕详情" bordered>
    <a-descriptions-item label="屏幕号" :span="3">{{screen.sid}}</a-descriptions-item>
    <a-descriptions-item label="名称">{{screen.name == null ? '未命名' : screen.name}}</a-descriptions-item>
    <a-descriptions-item label="播放场景">{{screen.sceneName()}}</a-descriptions-item>
    <a-descriptions-item label="上次跟踪时间">{{timeText}}</a-descriptions-item>
    <a-descriptions-item label="播放状态" :span="2" v-if="screen.connect">
      <span style="color:green">
        <a-icon type="play-circle"></a-icon> 播放中
      </span>
    </a-descriptions-item>
    <a-descriptions-item label="播放状态" :span="2" v-else>
      <span style="color:red">
        <a-icon type="stop"></a-icon> 断线了
      </span>
    </a-descriptions-item>
    <a-descriptions-item label="所属空间">{{screen.scope ? screen.scope : '<公共的>'}}</a-descriptions-item>
  </a-descriptions>

  <a-descriptions title="操作" style="margin-top:30px;"></a-descriptions>
  <a-button-group>
    <a-button               @click="btnAlterAlias"   >修改名字或移到其它空间</a-button>
    <a-button type="danger" @click="btnDestroyScreen">删除屏幕</a-button>
  </a-button-group>

  <a-descriptions title="数据" style="margin-top:30px;"></a-descriptions>
  <a-card>
    <pre style="margin-bottom:0">{{format(screen.data)}}</pre>
  </a-card>

  <!-- 模态框 -->
  <a-modal title="修改屏幕名称" v-model="modalVisible" @cancel="modalClose" @ok="modalConfirm"
      cancel-text="关闭" ok-text="确认" :style="{width: '80%', maxWidth: '800px'}" :confirmLoading="confirmLoading"
  >
    <p>请为你的场景起一个名字，以便在后台能够找到它。</p>
    <a-input placeholder="起个名字" allow-clear v-model.trim="modalAlias"></a-input>

    <br/><br/><br/>
    <p>把这个场景移到其它空间。</p>
    <a-input placeholder="所属空间" allow-clear v-model.trim="modalScope" :disabled="modalScopeToPublic"></a-input>
    <br/><br/>移动到公共空间 <a-switch v-model:checked="modalScopeToPublic" />
  </a-modal>
</div>
  `,
  data : function () {
    return {
      screen : null,
      timeText : null,
      //
      modalVisible : false,
      modalAlias : '',
      modalScope : '',
      modalScopeToPublic : false,
      confirmLoading : false,
    };
  },

  props : {
    sid : String
  },

  methods : {
    // 事件触发
    onScreenStatusSyncAll : function (array) {
      this.screen = batch.getOne(this.sid);
    },
    onScreenUpdated : function (s) {
      if (this.screen && s.sid === this.sid) {
        this.screen = batch.getOne(this.sid);
      }
    },
    onScreenDestroyed : function (s) {
      if (s === this.sid) {
        this.screen = null;
      }
    },

    // UI 组件事件触发
    btnAlterAlias : function () {
      this.modalCreate();
    },
    btnDestroyScreen : function () {
      fetcher.destroyScreen(this.screen.sid)
      .then((data) => {
        if (data && data.result) {
          this.$message.success('屏幕删除成功');
        } else {
          this.$message.error('屏幕删除失败');
        }
      })
      .catch((e) => {
        console.error(e);
        this.$message.error('屏幕删除操作出现错误');
      })
    },
    modalCreate : function () { // 模态框
      this.modalAlias = this.screen.name == null ? '' : this.screen.name;
      this.modalScope = this.screen.scope == null ? '' : this.screen.scope;
      this.modalScopeToPublic = false;
      this.modalVisible = true;
      this.confirmLoading = false;
    },
    modalClose : function () { // 模态框
      this.modalVisible = false;
    },
    modalConfirm : function () { // 模态框
      this.confirmLoading = true;
      fetcher.alterAlias(this.screen.sid, this.modalAlias, this.modalScopeToPublic ? '' : this.modalScope)
        .then((data) => {
          if (data && data.result) {
            this.confirmLoading = false;
            this.modalClose();
            this.$message.success('屏幕名称修改成功');
          } else {
            this.$message.error('屏幕名称修改失败');
          }
        })
        .catch((e) => {
          this.confirmLoading = false;
          console.error(e);
          this.$message.error('屏幕名称修改操作出现错误');
        })
    },

    // 名字
    buildTimeText : function (time) {
      if (!time) {
        if (this.screen) {
          time = this.screen.instant;
        } else {
          return '';
        }
      }

      this.timeText = instant.instantText(time);
      if (this.timeText == null) {
        this.timeText = '无';
      }
    },

    format : function (obj) {
      let text = formatJson(obj, false);
      switch (text.trim()) {
        case 'null': case 'undefined': case '': return '无数据';
        default: return text;
      }
    },
  },

  computed : {
  },

  watch : {
    screen : function (newv) {
      this.buildTimeText(newv.instant);
    }
  },

  mounted : function () {
    bus().$on(KEY_SCREEN_REFRESH, this.onScreenStatusSyncAll);
    bus().$on(KEY_SCREEN_UPDATED, this.onScreenUpdated);
    bus().$on(KEY_SCREEN_DESTROYED, this.onScreenDestroyed);
    this.screen = batch.getOne(this.sid);
    handler = setInterval(() => {
      this.buildTimeText();
    }, 30000); // 30 秒
  },

  destroyed : function () {
    clearInterval(handler);
    bus().$off(KEY_SCREEN_REFRESH, this.onScreenStatusSyncAll);
    bus().$off(KEY_SCREEN_UPDATED, this.onScreenUpdated);
    bus().$off(KEY_SCREEN_DESTROYED, this.onScreenDestroyed);
  }

});
